<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>税后工资计算器</title>
    <meta name="description" content="税后工资计算器">
    <meta name="keywords" content="税后工资计算器">
    <link rel="shortcut icon" href="https://www.linglan01.cn/favicon.JPG" type="image/x-icon">
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100vw;
            height: 100vh;
        }

        .content {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: center;
            gap: 20px;
        }

        .left,
        .right {
            width: calc(100vw - 20px);
            max-width: 400px;
            border: 1px solid #dbdbdb;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .panel-head {
            background: #f5f5f5;
            width: 100%;
            height: 36px;
            text-align: center;
            border-bottom: 1px solid #dbdbdb;
        }

        .panel-title {
            font-size: 16px;
            margin: 0;
            height: 36px;
            line-height: 36px;
            font-weight: normal;
        }

        .item {
            display: flex;
            align-items: center;
            margin: 10px 0;
        }

        .item-title {
            color: #666;
            width: 140px;
            text-align: right;
            margin-right: 10px;
        }

        input[type="text"],
        select,
        input[type=number] {
            width: 136px;
            height: 20px;
            border: 1px solid #ebebeb;
            padding: 5px 0 5px 10px;
            line-height: 20px;
            outline: none;
            box-sizing: content-box;
        }

        .btn-view {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
        }

        .btn {
            height: 32px;
            width: 80px;
            margin: 0 5px;
            background: #4bae4f;
            border: 1px solid #4bae4f;
            line-height: 30px;
            vertical-align: middle;
            font-size: 16px;
            color: #fff;
            cursor: pointer;
            border-radius: 4px;
            outline: none;
        }

        .reset {
            border: 1px solid #ccc;
            background-color: #ededed;
            color: #333;
        }

        .blog {
            position: fixed;
            top: 20px;
            right: 20px;
        }
    </style>
</head>

<body>
    <div class="blog"><a href="https://linglan01.cn/about" target="_blank">凌览的博客</a></div>
    <h2>个税计算器</h2>
    <div class="content">
        <!-- 税前 -->
        <div class="left">
            <div class="panel-head">
                <h3 class="panel-title">累计预扣预缴个税计算器</h3>
            </div>
            <div class="panel-body">
                <div class="item">
                    <div class="item-title">纳税期数</div>
                    <div class="item-input">
                        <select id="taxPeriod">
                            <option value="1" selected="selected">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                        </select>
                    </div>
                </div>

                <div class="item">
                    <div class="item-title">本月工资</div>
                    <div class="item-input">
                        <input id="txtIncome" name="" type="number" value="">
                        <span>元</span>
                    </div>
                </div>


                <div class="item">
                    <div class="item-title">累计</div>
                    <div class="item-input">
                        <input id="txtIncomeSum" name="" type="number" value="0">
                        <span>元</span>
                    </div>
                </div>

                <div class="item">
                    <div class="item-title">社保、公积金</div>
                    <div class="item-input">
                        <input id="txtInsure" name="" type="number" value="0">
                        <span>元</span>
                    </div>
                </div>

                <div class="item">
                    <div class="item-title">累计</div>
                    <div class="item-input">
                        <input id="txtInsureSum" name="" type="number" value="0">
                        <span>元</span>
                    </div>
                </div>

                <div class="item">
                    <div class="item-title">专项附加扣除</div>
                    <div class="item-input">
                        <input id="txtZXFJ" name="" type="number" value="0">
                        <span>元</span>
                    </div>
                </div>

                <div class="item">
                    <div class="item-title">累计</div>
                    <div class="item-input">
                        <input id="txtZXFJSum" name="" type="number" value="0">
                        <span>元</span>
                    </div>
                </div>

                <div class="btn-view">
                    <button class="btn submit">计算</button>
                    <button class="btn reset">重置</button>
                </div>
            </div>
        </div>


        <!-- 税后结果 -->
        <div class="right">
            <div class="panel-head">
                <h3 class="panel-title">计算结果</h3>
            </div>
            <div class="panel-body">
                <div class="item">
                    <div class="item-title">应纳税所得额</div>
                    <div class="item-input">
                        <text id="lblTaxableIncome">0</text>
                        <span>元</span>
                    </div>
                </div>

                <div class="item">
                    <div class="item-title">适用税率</div>
                    <div class="item-input">
                        <text id="lblTaxRate">0</text>
                        <span>%</span>
                    </div>
                </div>

                <div class="item">
                    <div class="item-title">速算扣除数</div>
                    <div class="item-input">
                        <text id="lblQuick">0</text>
                        <span>元</span>
                    </div>
                </div>

                <div class="item">
                    <div class="item-title">累计应缴税款
                    </div>
                    <div class="item-input">
                        <input id="txtTaxAll" readonly name="" type="number" value="">
                        <span>元</span>
                    </div>
                </div>

                <div class="item">
                    <div class="item-title">已缴税款</div>
                    <div class="item-input">
                        <input id="txtTaxAlready" readonly name="" type="number" value="">
                        <span>元</span>
                    </div>
                </div>

                <div class="item">
                    <div class="item-title">应交（退）税款</div>
                    <div class="item-input">
                        <input id="txtTax" readonly name="" type="number" value="">
                        <span>元</span>
                    </div>
                </div>

                <div class="item">
                    <div class="item-title">本月税后收入</div>
                    <div class="item-input">
                        <input id="txtRealIncome" readonly name="" type="number" value="">
                        <span>元</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        //计算按钮
        const submit = document.getElementsByClassName('submit')[0]
        //重置按钮
        const reset = document.getElementsByClassName('reset')[0]

        //纳税期数
        const taxPeriod = document.getElementById('taxPeriod')
        //本月工资
        const txtIncome = document.getElementById('txtIncome')
        const txtIncomeSum = document.getElementById('txtIncomeSum')
        //社保、公积金
        const txtInsure = document.getElementById('txtInsure')
        const txtInsureSum = document.getElementById('txtInsureSum')
        //专项附加扣除
        const txtZXFJ = document.getElementById('txtZXFJ')
        const txtZXFJSum = document.getElementById('txtZXFJSum')

        //应纳税所得额
        const lblTaxableIncome = document.getElementById('lblTaxableIncome')
        //适用税率
        const lblTaxRate = document.getElementById('lblTaxRate')
        //速算扣除数
        const lblQuick = document.getElementById('lblQuick')
        //累计应缴税款
        const txtTaxAll = document.getElementById('txtTaxAll')
        //已缴税款
        const txtTaxAlready = document.getElementById('txtTaxAlready')
        // 本月税后收入
        const txtRealIncome = document.getElementById('txtRealIncome')

        const countTxtIncomeSum = function () {
            txtIncomeSum.value = txtIncome.value * taxPeriod.value
        }

        const countTxtInsureSum = function () {
            txtInsureSum.value = txtInsure.value * taxPeriod.value
        }

        const countTxtZXFJSum = function () {
            txtZXFJSum.value = txtZXFJ.value * taxPeriod.value
        }

        // 输入框失焦后触发事件
        txtIncome.onblur = countTxtIncomeSum
        txtInsure.onblur = countTxtInsureSum
        txtZXFJ.onblur = countTxtZXFJSum

        // 纳税期数改变后，重新计算
        taxPeriod.onchange = () => {
            countTxtIncomeSum()
            countTxtInsureSum()
            countTxtZXFJSum()
        }

        const taxRates = [
            { range: [0, 36000], rate: 0.03, deduction: 0 },
            { range: [36000, 144000], rate: 0.1, deduction: 2520 },
            { range: [144000, 300000], rate: 0.2, deduction: 16920 },
            { range: [300000, 420000], rate: 0.25, deduction: 31920 },
            { range: [420000, 660000], rate: 0.3, deduction: 52920 },
            { range: [660000, 960000], rate: 0.35, deduction: 85920 },
            { range: [960000, Infinity], rate: 0.45, deduction: 181920 }
        ];

        //获取税率及速算扣除数
        const getTaxRate = function (taxableIncome) {
            for (var i = 0; i < taxRates.length; i++) {
                const { range } = taxRates[i]
                if (taxableIncome >= range[0] && taxableIncome < range[1]) {
                    return taxRates[i]
                }
            }
        }

        submit.onclick = () => {
            let salary = txtIncome.value
            if (!salary) {
                alert('无效的工资收入!')
                return
            }

            //累计减除费用
            const cumulativeDeductionOfExpenses = 5000 * taxPeriod.value
            //累计预扣预缴应纳税所得额
            const withholdingTaxableIncome = txtIncomeSum.value - txtInsureSum.value - txtZXFJSum.value - cumulativeDeductionOfExpenses
            if (withholdingTaxableIncome > 0) {
                const taxRate = getTaxRate(withholdingTaxableIncome)
                const { rate, deduction } = taxRate
                //应纳税所得额，与累计预扣预缴应纳税所得额是一样的，名词不同
                lblTaxableIncome.innerText = withholdingTaxableIncome
                // 适应税率
                lblTaxRate.innerText = rate * 100
                // 速算扣除数
                lblQuick.innerText = deduction
                //累计应缴税款
                txtTaxAll.value = withholdingTaxableIncome * rate - deduction

                const beforeTaxPeriod = taxPeriod.value - 1
                const beforeWithholdingTaxableIncome = beforeTaxPeriod * txtIncome.value - txtInsure.value * beforeTaxPeriod - txtZXFJ.value * beforeTaxPeriod - 5000 * beforeTaxPeriod
                const { rate: beforeRate, deduction: beforeDeduction } = getTaxRate(beforeWithholdingTaxableIncome)
                //已缴税款
                txtTaxAlready.value = beforeWithholdingTaxableIncome * beforeRate - beforeDeduction

                //应交（退）税款 = 累计应缴税款-已缴税款
                txtTax.value = txtTaxAll.value - txtTaxAlready.value
                //本月税后收入 = 本月工资 - 社保、公积金 - 应交（退）税款
                txtRealIncome.value = txtIncome.value - txtInsure.value - txtTax.value
                return
            }
            alert('无需纳税')
        }

        // 重置
        reset.onclick = () => {
            txtIncome.value = ''
            txtIncomeSum.value = 0
            txtInsure.value = ''
            txtInsureSum.value = 0
            txtZXFJ.value = ''
            txtZXFJSum.value = 0
            lblTaxableIncome.innerText = 0
            lblTaxRate.innerText = 0
            lblQuick.innerText = 0
            txtTaxAll.value = ''
            txtTaxAlready.value = ''
            txtTax.value = ''
            txtRealIncome.value = ''
        }
    </script>

</body>

</html>